<template>
  <div class="login-box">
    <div class="login-logo">
      <img src="@/assets/ysten_logo.png" alt="Logo">
    </div>
    <div class="login-title">
      <h3>售后管理系统</h3>
      <p>登录</p>
    </div>
    <div class="login-form">
      <el-form label-position="top" :model="loginDto" :rules="loginRules" ref="loginForm">
        <el-form-item prop="userName">
          <el-input placeholder="用户名" v-model="loginDto.userName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" type="password" v-model="loginDto.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input placeholder="验证码" type="text" class="captcha-input"
                    v-model="loginDto.captcha" auto-complete="off" @keyup.enter.native="handelLogin"></el-input>
          <img alt="点击刷新" :src="'data:image/jpeg;base64,'+image" @click="refreshCode" class="captcha-image"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native.prevent="handelLogin" :loading="loadingFlag">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {getCaptcha} from '@/api/login'
  import {encrypt} from '../utils/encrypt'
  import {removeWatermark} from '@/utils/watermark'

  export default {
    name: 'login',
    created () {
      this.refreshCode()
      removeWatermark()
    },
    data () {
      return {
        loadingFlag: false,
        confirmCaptcha: '',
        image: '',
        loginDto: {
          userName: '',
          captcha: '',
          password: ''
        },
        loginRules: {
          userName: [
            {required: true, message: '请填写用户名', trigger: 'blur'},
            {min: 4, max: 20, message: '长度必须在4-20字符之间', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {min: 6, message: '长度不小于6位', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '请填写验证码', trigger: 'blur'},
            {validator: this.validateCaptcha, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handelLogin () {
        let _loginFrom = this.$refs.loginForm
        _loginFrom.validate((valid) => {
          if (valid) {
            // 登录逻辑
            this.loadingFlag = true
            let dto = {
              userName: this.loginDto.userName,
              captcha: this.loginDto.captcha,
              password: this.loginDto.password
            }
            dto.password = encrypt(dto.password)
            this.$store.dispatch('Login', dto).then(() => {
              this.loadingFlag = false
              this.$router.push({path: '/'})
            }).catch(() => {
              this.loadingFlag = false
            })
          } else {
            return false
          }
        })
      },
      validateCaptcha (rule, value, callback) {
        if (value === '' || value.toUpperCase() !== this.confirmCaptcha) {
          callback(new Error('请输入正确的验证码'))
        } else {
          callback()
        }
      },
      // 获取验证码
      refreshCode () {
        getCaptcha().then(response => {
          this.image = response.image
          this.confirmCaptcha = response.vCode
        }).catch(() => {
          this.$message({
            showClose: true,
            message: '验证码获取失败'
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .login-box {
    margin: 7% auto;
    max-width: 400px;
    border-radius: 5px;
    background-color: #f0f0f3;
    .login-logo {
      text-align: right;
      height: 30px;
      padding: 30px 30px 0px 30px;
      img {
        width: auto;
        height: 100%;
      }
    }
    .login-title {
      color: #2a323c;
      text-align: center;
      padding: 20px 0 0;
    }
    .login-form {
      padding: 20px 30px;
      border: 0;
      .captcha-input {
        width: 60%;
      }
      .captcha-image {
        vertical-align: middle;
      }
      button {
        display: block;
        width: 100%;
      }
    }
  }

  h3 {
    margin: 0 0 30px 0;
  }

  p {
    font-weight: bold;
    color: #898989;
    margin: 0;
  }
</style>
